import './city.scss'
import React, { Component } from 'react';
import * as service from '../../api'
import { IndexBar, List,NavBar } from 'antd-mobile'
import {connect} from 'react-redux'


class city extends Component {
    constructor(props) {
        super(props)
        this.state = {
            citylist: []
        }
    }
    async componentDidMount() {
        var res = await service.city_sortCity()
        var list = JSON.parse(res.data.data)
        this.setState({ citylist: list })
    }
    onBack(){
            this.props.history.replace('/index/home')
          }
  editcity(name){
       this.props.a(name)
       this.props.history.replace('/index/home')
  }
    render() {
        return (
            <div className='city'>
                 <NavBar onBack={this.onBack.bind(this)}  style={{
                    '--height': '50px',
                    '--border-bottom': '1px #eee solid',
                    }}>城市
                </NavBar>
                 <div style={{ height: window.innerHeight }}>
                <IndexBar>
                    {this.state.citylist.map(group => {
                        const { letter, data } = group
                        return (
                            <IndexBar.Panel
                               key={data}
                                index={letter.toUpperCase()}
                                title={`${letter.toUpperCase()}`}
                            >
                                <List>
                                    {data.map((item, index) => (
                                        <List.Item key={index} onClick={()=>{this.editcity(item.name)}}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
            </div>
        );
    }
}

export default connect(
    (state)=>{
        return {
           
        }
    },
    (dispatch)=>{
        return{
             a(name){
            dispatch({type:'EDIT_CITY',payload:name})
        }
        }
       
    }
)(city);